{% extends 'admin_panel/base.html' %}

{% block title %}评论管理 - 旅行记录管理系统{% endblock %}
{% block page_title %}评论管理{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">评论列表</h5>
        <div class="d-flex">
            <!-- 批量操作按钮 -->
            <button type="button" class="btn btn-outline-danger me-2" id="bulkDeleteBtn" style="display: none;">
                <i class="bi bi-trash me-1"></i>批量删除
            </button>
            
            <!-- 搜索表单 -->
            <form method="get" class="search-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="搜索评论内容、用户名..." 
                           value="{{ search_query }}">
                    <button class="btn btn-outline-secondary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
    
    <div class="card-body">
        {% if comments %}
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>评论内容</th>
                        <th>用户</th>
                        <th>旅行记录</th>
                        <th>评论时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for comment in comments %}
                    <tr>
                        <td>
                            <div class="comment-content">
                                {{ comment.content|truncatewords:20 }}
                                {% if comment.content|wordcount > 20 %}
                                <a href="#" class="text-primary small ms-2" data-bs-toggle="modal" 
                                   data-bs-target="#commentModal{{ comment.id }}">
                                    查看完整
                                </a>
                                {% endif %}
                            </div>
                        </td>
                        <td>{{ comment.user.username }}</td>
                        <td>
                            <a href="{% url 'admin_panel:admin_travel_detail' comment.travel_record.id %}" 
                               class="text-decoration-none">
                                {{ comment.travel_record.title|truncatewords:5 }}
                            </a>
                        </td>
                        <td>{{ comment.created_at|date:"Y-m-d H:i" }}</td>
                        <td>
                            <form method="post" action="{% url 'admin_panel:admin_comment_delete' comment.pk %}" 
                                  class="d-inline" onsubmit="return confirmDelete('确定要删除这条评论吗？')">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-outline-danger btn-sm">
                                    <i class="bi bi-trash"></i> 删除
                                </button>
                            </form>
                        </td>
                    </tr>

                    <!-- 评论详情模态框 -->
                    <div class="modal fade" id="commentModal{{ comment.id }}" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">评论详情</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <p><strong>用户：</strong>{{ comment.user.username }}</p>
                                    <p><strong>旅行记录：</strong>{{ comment.travel_record.title }}</p>
                                    <p><strong>评论时间：</strong>{{ comment.created_at|date:"Y-m-d H:i" }}</p>
                                    <hr>
                                    <p><strong>评论内容：</strong></p>
                                    <div class="border rounded p-3 bg-light">
                                        {{ comment.content|linebreaks }}
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                    <form method="post" action="{% url 'admin_panel:admin_comment_delete' comment.pk %}" 
                                          class="d-inline" onsubmit="return confirmDelete('确定要删除这条评论吗？')">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-danger">
                                            <i class="bi bi-trash"></i> 删除评论
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        {% if is_paginated %}
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                {% if page_obj.has_previous %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">上一页</a>
                </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                <li class="page-item {% if page_obj.number == num %}active{% endif %}">
                    <a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a>
                </li>
                {% endfor %}

                {% if page_obj.has_next %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}">下一页</a>
                </li>
                {% endif %}
            </ul>
        </nav>
        {% endif %}

        {% else %}
        <div class="text-center py-5">
            <i class="bi bi-chat-dots display-1 text-muted"></i>
            <p class="text-muted mt-3">暂无评论数据</p>
        </div>
        {% endif %}
    </div>
</div>

<!-- 统计信息 -->
<div class="row mt-4">
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-primary">{{ comments.paginator.count }}</h3>
                <p class="text-muted mb-0">总评论数</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-success">{{ today_comments }}</h3>
                <p class="text-muted mb-0">今日评论</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h3 class="text-info">{{ active_commenters }}</h3>
                <p class="text-muted mb-0">活跃评论用户</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 自动显示模态框如果有hash
    const hash = window.location.hash;
    if (hash && hash.startsWith('#commentModal')) {
        const modal = new bootstrap.Modal(document.getElementById(hash.substring(1)));
        modal.show();
    }
});
</script>
{% endblock %}
